import Cookies from 'js-cookie'
// 浏览器本地存储方式(都是字符串，其中有一种数据叫数组字符串)
/*
控制台中查看：Application->Storage->
locaStorage
sessionStorage -> 内置一些方法：
存入：sessionStorage,setItem('key名'，value值)
取出：sessionStorage,getItem('key名') -> 值
cookies
存入：document.cookies = 'key名=value值'
取出：document.cookies 会拿出所有的cookies里的值 一个完整的字符串 'key名=值；key名=值'
(自己写原生js操作cookies)
借助js-cookies的包，人家把存入和取值的过程写好了，暴露出来的额几个方法可以直接用
*/
const state = {
  sidebar: {
    // Cookies.get('sidebarStatus')本地址'0'(侧边栏收起)'1'(侧边栏展开)
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    withoutAnimation: false // 侧边栏收起时是否有动画，传上来的就是false
  },
  device: 'desktop'
}

const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1)
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set('sidebarStatus', 0) // 本地存入0
    state.sidebar.opened = false // state里的opened变为false
    // 将false赋值给state.sidebar.withoutAnimation
    state.sidebar.withoutAnimation = withoutAnimation
  },
  TOGGLE_DEVICE: (state, device) => {
    state.device = device
  }
}

const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  // 关闭侧边栏
  // 参数1：store对象 我们要提交store.commit
  // { commit } = store解构赋值直接拿到commit方法(属性)
  // 参数2：layout/index.vue 调用传入对象{withoutAnimation: false}
  // { withoutAnimation } = { withoutAnimation: false } without 赋值后左侧withoutAnimation变量值就是false
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  // 切换设备标记的英文字符串
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  }
}

export default {
  // namespaced: true, 在组件中调mutations,actions的时候，要加上"模块名/"
  namespaced: true,
  state,
  mutations,
  actions
}
